<template>
  <div class="flex items-center text-[13px]" @click.stop="show = !show">
    <span class="mr-[10px]">{{ gameText }}</span>
  </div>
  <div>
    <van-popup round v-model:show="show" position="bottom" :style="{ height: '80%' }" :close-on-click-overlay="true">
      <div class="popup-box">
        <ul>
          <li class="item" v-for="item in gameOptions" :key="item.value" @click="handleGameSelect(item)">
            {{ item.text }}
          </li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { useGameStore } from "@/store/modules/game";
import { storeToRefs } from "pinia";
const show = ref(false)
const gameStore = useGameStore();
const { gameTotal } = storeToRefs(gameStore);

const gameText = ref('选择游戏')

const gameOptions = computed(() => {
  console.log(gameTotal.value, "gameTotal");
  return [{ text: "全部游戏", value: -1 }].concat(
    gameTotal.value.map(v => {
      return {
        text: v.Name,
        value: v.LotteryId
      };
    })
  );
});

const emit = defineEmits(["update"])
const handleGameSelect = (val) => {
  console.log(val, 'val')
  if (val.value == -1) {
    gameText.value = '选择游戏'
  } else {
    gameText.value = val.text
  }
  show.value = false

  emit("update", val)
}
const open = () => {
  show.value = true
}


defineExpose({
  open,
});

</script>

<style scoped>
.popup-box {
  @apply py-[5px];
}

.popup-box .item {
  @apply h-[50px] text-[14px] text-center leading-[50px] border-solid border-b-[1px] border-[#E4E4E4];
}
</style>